<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        :colNumOfRow="4"
        formItemWidth="80px"
        :isScalingBtn="false"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showPagination
        showActionCol
        :defaultMinWidth="100"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :actionRender="actionRender"
        :actionColWidth="100"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            type="primary"
            size="mini"
            @click="handleAdd"
          >
            新增单据
          </el-button>
        </div>
      </BasicTable>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEM, TABLE_COLUMNS } from './constants';
import { setAuthBtnId, handleOpenNewPage } from '@/utils/bizUtils';
import { queryRecordLimitDataService, deleteLimitRecordService } from '@/api/stock/upperLowerLimits';
import { getOAUrlToAction } from '@/utils/getUtils';

export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      formItemList: FORM_ITEM,
      formData: {
        recordNo: '',
        commitState: '',
        pusherName: '',
        pusherDeptName: '',
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false,
      },
      pageSizes: [10, 100, 1000]
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    actionRender (h, { row }) {
      // 处理状态：commitState NOT：未提交 COMMIT：审核中 OK：审核通过 FAIL：审核未通过
      return (
        <div class="table-action">
          { row.commitState == 'OK' || row.commitState == 'FAIL' || row.commitState == 'COMMIT'
            ? <el-button size="mini" type="text" onClick={() => this.handleViewInfo(row, 'view')}>查看</el-button>
            : null
          }
          { row.commitState == 'NOT' || row.commitState == 'FAIL'
            ? <el-button size="mini" type="text" onClick={() => this.handleEditInfo(row, 'edit')}>编辑</el-button>
            : null
          }
          { row.commitState == 'COMMIT'
            ? <el-button size="mini" type="text" onClick={() => this.handleToAudit(row)}>审核</el-button>
            : null
          }
          { row.commitState == 'OK' || row.commitState == 'FAIL'
            ? <el-button size="mini" type="text" onClick={() => this.handleToAudit(row)}>审核记录</el-button>
            : null
          }
          { row.commitState == 'NOT'
            ? <el-button size="mini" type="text" onClick={() => this.handleDeleteRecord(row)}>删除</el-button>
            : null
          }
        </div>
      );
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.paginationParams,
        ...this.formData,
      };
      setAuthBtnId();
      const res = await queryRecordLimitDataService(
        data,
        state => { this.tableInfo.loading = state }
      );
      if (res?.retData) {
        this.tableInfo.list = res.retData.results;
        this.total = res.retData.totalNum;
      }
    },
    // 编辑
    handleEditInfo (row, type) {
      handleOpenNewPage(this, { name: 'limitBatchEdit', query: { recordNo: row.recordNo, type } })
    },
    // 查看
    handleViewInfo (row) {
      handleOpenNewPage(this, { name: 'limitBatchView', query: { recordNo: row.recordNo } })
    },
    // 审核or审核记录
    handleToAudit (row) {
      getOAUrlToAction(row.workflowRequestId, state => { this.tableInfo.loading = state });
    },
    // 编辑
    handleAdd () {
      this.$router.push({ name: 'limitBatchEdit', query: { type: 'add' } })
    },
    // 删除
    async handleDeleteRecord (row) {
      const res = await deleteLimitRecordService(row, state => { this.tableInfo.loading = state })
      if (res) {
        this.$message.success('删除成功')
        this.getTableData()
      }
    }
  }
}
</script>
